<template>
  <div class="content">
    <div class="contentBox">
      <div class="fontBox">
        <span class="font">新密码&ensp;&ensp; ：</span>
        <el-input v-model="newPassword" type="password"></el-input>
      </div>
      <div class="fontBox">
        <span class="font">确认密码 ：</span>
        <el-input v-model="newSurePassword" type="password"></el-input>
      </div>
      <div class="buttonBox">
        <el-button type="primary" @click="toChangePwd">确认修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../../util/http';

export default {
  data() {
    return {
      newPassword: '',
      newSurePassword: '',
    };
  },
  methods: {
    toChangePwd() {
      if (this.newPassword === '' || this.newSurePassword === '') {
        this.$message.error('密码不能为空');
      } else if (this.newPassword !== this.newSurePassword) {
        this.$message.error('两次密码不一样哦~');
      } else {
        this.$confirm('是否修改密码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          http.post(`/loginAPI/updatePwd?id=${window.localStorage.getItem('userId')}
              &pwd=${this.newPassword}`)
            .then((res) => {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
            })
            .catch((error) => {
              this.$message.error(error);
              console.log(error);
            });
          // this.$message({
          //   type: 'success',
          //   message: '修改成功!',
          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
      }
    },
  },
};
</script>

<style scoped>
.content{
  width: 23rem;
  height: 11rem;
  border: .03rem solid #ccc;
  border-left:none;
  border-right:none;
  border-bottom:none;
}
.contentBox{
  margin: 1.4rem auto;
  width: 8rem;
  height: 5rem;
}
.fontBox{
  padding: 1rem 0 0 0;
}
.font{
  color: #66cccc;
  font-size: .5rem;
}
.el-input {
  width: 5rem;
  height: 10%;
}
.buttonBox{
  margin: 1rem 0 0 .9rem;
}
.el-button {
  background-color: #66cccc;
  width: 6rem;
	color: white;
  border:#66cccc;
}
.el-button:hover {
  background-color: #FAACA8;
}
</style>
